<template>
  <div class="user">
    <div class="user-wrapper">
      <div class="field">
        <div class="control">
          <span><strong>用户名：</strong></span>
          <input class="input is-primary" type="text" placeholder="用户名" v-model="username">
        </div>
      </div>
      <div class="field">
        <div class="control">
          <span><strong>密码：</strong></span>
          <input class="input is-primary" type="text" placeholder="密码" v-model="password">
        </div>
      </div>
      <div class="field">
        <div class="control">
          <span><strong>电话号码：</strong></span>
          <input class="input is-primary" type="text" placeholder="电话号码" v-model="phonenumber">
        </div>
      </div>
      <div class="button" style="margin-top:20px" @click="submit">确定</div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        username: '',
        password: '',
        phonenumber: ''
      }
    },
    methods: {
      submit() {
        if (this.userName === '' || this.password === '' || this.phoneNumber === '')
          alert('注册失败！')
        else {
          axios({
            url: 'http://localhost:8088/Register',
            method: 'post',
            params: {
              userName: this.username,
              phoneNumber: this.phonenumber,
              password: this.password
            }
          }).then(() => {
            this.$router.push({
              path:'/',
              query:{
                username:this.username,
                password:this.password
              }
            });
          })
        }
      }
    },
  }

</script>
<style>
  .user {
    text-align: center;
    width: 40%;
  }

  .user-wrapper {
    background-color: lightcyan;
    padding: 20px;
    position: relative;
    left: 400px;
    border: solid 1px lightcoral;
  }

</style>
